/* 主容器 - 使用Flex布局实现侧边栏和内容区并排显示
Main container - Using Flex layout for sidebar and content area alignment */
.container {
    display: flex; /* 启用弹性盒子布局 Enable flexbox */
    gap: 20px;     /* 设置子元素间距为20px Set spacing between child elements */
    padding: 20px; /* 容器内边距为20px Container padding */
}

/* 侧边栏样式 - 包含导航按钮的固定宽度区域
Sidebar style - Fixed-width area containing navigation buttons */
.sidebar {
    width: 200px;           /* 侧边栏宽度200px Sidebar width */
    background: #f5f5f5;    /* 浅灰色背景 Light gray background */
    padding: 15px;          /* 内边距15px Inner spacing */
    border-radius: 8px;     /* 圆角半径8px Rounded corners */
}

/* 导航按钮基础样式
Navigation button base style */
.nav-btn {
    display: block;         /* 块级元素显示 Block display */
    width: 100%;           /* 宽度充满父容器 Full width */
    padding: 12px;         /* 按钮内边距 Button padding */
    margin-bottom: 20px;   /* 底部外边距10px Bottom margin */
    background: #007BFF;   /* 主蓝色背景 Primary blue background */
    color: white;          /* 文字白色 White text */
    border: none;          /* 无边框 No border */
    border-radius: 4px;    /* 圆角4px Rounded corners */
    cursor: pointer;       /* 鼠标手型指针 Cursor pointer */
    transition: background 0.3s; /* 背景色过渡动画0.3秒 Background transition */
}

/* 按钮悬停状态
Button hover state */
.nav-btn:hover {
    background: #0056b3; /* 深蓝色背景 Darker blue on hover */
}

/* 激活状态按钮
Active state button */
.nav-btn.active {
    background: #004085; /* 更深的蓝色表示激活状态 Darker blue for active state */
}

/* 内容区域 - 自动填充剩余空间
Content area - Fills remaining space */
.content-area {
    flex: 1;               /* 弹性扩展填满剩余空间 Flex-grow to fill space */
    background: white;     /* 白色背景 White background */
    padding: 20px;         /* 内边距20px Padding */
    border-radius: 8px;    /* 圆角8px Rounded corners */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 细微阴影效果 Subtle shadow */
}

/* 内容模块默认隐藏
Content modules hidden by default */
.content-module {
    display: none;     /* 初始隐藏状态 Initially hidden */
    padding: 15px;    /* 模块内边距 Module padding */
}

/* 激活的内容模块
Active content module */
.content-module.active {
    display: block;                    /* 块级显示 Block display */
    animation: fadeIn 0.3s;           /* 使用淡入动画 Apply fade-in animation */
}

/* 淡入动画关键帧
Fade-in animation keyframes */
@keyframes fadeIn {
    from { opacity: 0; } /* 起始透明度0 Start fully transparent */
    to   { opacity: 1; } /* 结束透明度1 End fully opaque */
}